<template>
	<view class="body" v-if="show">
		<view class="goods">
			<view class="item">
				<view class="img">
					<image :src="info.spec.spec_image==''? info.image : info.sku_image" mode="scaleToFill"></image>
				</view>
				<view class="content">
					<view class="top">
						<view class="title">{{ info.goods_name }}</view>
						<view class="price"> <text>￥</text> {{ info.goods_price }}</view>
					</view>
					<view class="center">
						<view>
							<view>{{ info.goods_attr ? info.goods_attr :'' }}</view>
						</view>
						<view class="num">x{{ info.total_num }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="amount">
			<view class="a-item">
				<view class="a-title">退款金额</view>
				<view class="a-cont red">￥{{money}}</view>
			</view>
			<view class="a-item">
				<view class="a-title">退款类型</view>
				<view class="a-cont">{{title}}</view>
			</view>
			<view class="a-item">
				<view class="a-title">退款原因</view>
				<view class="a-cont ">
					<uni-data-select v-model="value" :localdata="range" placeholder="请选择退款原因"></uni-data-select>
				</view>
				<text class="star">*</text>
			</view>
		</view>

		<view class="instructions">
			<view class="i-title">申请说明<text>(选填)</text></view>
			<view class="text">
				<textarea :value="desc" maxlength="200" cols="30" rows="10" placeholder="补充描述，有利于商家更好处理售后问题。"
					placeholder-style="font-size: 24rpx;" @input="sumfontnum"></textarea>
				<view class="length"><text>{{fontNum}}</text>/200</view>
			</view>
			<view class="i-img">
				<block v-if="imgList.length > 0">
					<block v-for="(item,index) in  imgList" :key="index">
						<view class="u-img">
							<image :src="item" mode=""></image>
							<uni-icons type="clear" size="20" color="red" @click="deleteImg(index)"></uni-icons>
						</view>
					</block>
					<view class="upload-img" v-if="imgList.length < 5" @click="uploadImage(5 - imgList.length)">
						<uni-icons type="plusempty" size="30" color="#999999"></uni-icons>
					</view>
				</block>
				<block v-else>
					<view class="upload" @click="uploadImage(5 - imgList.length)">
						<uni-icons type="image" size="30" color="#999999"></uni-icons>
						<text>上传图片</text>
					</view>
				</block>
			</view>
			<view class="btn">
				<button @click="submit()">确认提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				value: -1, //下拉框初始
				range: [], //下拉框选项
				fontNum: 0, //文本框字数
				desc: '', //文本框内容
				imgList: [], //上传的图片路径列表，
				imgurlList: [], //图片的url传给后端
				id: 0, //订单商品id
				title: '', //退款类型文字
				type: 0, //退款类型
				money: 0, //退款金额
				info: {}
			}
		},
		onLoad(options) {
			let _this = this
			_this.id = options.id
			_this.title = options.title
			_this.type = options.type

			_this.getInfo()
		},
		methods: {
			getInfo() {
				let _this = this
				_this.$api.get('mall.refund/info', {
					id: _this.id
				}).then(res => {
					if (res.code == 1) {
						_this.info = res.data.order_goods_info
						let reason_list = res.data.refund_reason_list
						let list = reason_list.map((item, index) => {
							return {
								value: index,
								text: item
							}
						})
						_this.range = list
						_this.money = res.data.refund_money
						_this.show = true
					} else {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							success: res => {
								if (res.confirm) {
									uni.navigateBack({
										delta: 1
									})
								}
							}
						})
					}
				})
			},
			sumfontnum(e) {
				this.fontNum = e.detail.value.length
				this.desc = e.detail.value
			},
			uploadImage(num) {
				let _this = this
				uni.chooseImage({
					count: num, // 图片数量
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择或者拍照
					success: async (res) => {
						const tempFilePaths = res.tempFilePaths;
						for (let i = 0; i < tempFilePaths.length; i++) {
							let result = await _this.uploadFile(tempFilePaths[i])
							_this.imgList.push(result.fullurl)
							_this.imgurlList.push(result.url)
						}
					}
				});
			},
			uploadFile(tempFilePaths) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: this.baseUrl + 'common/upload', //上传图片api
						filePath: tempFilePaths,
						name: 'file',
						header: {
							token: uni.getStorageSync('app_token')
						},
						success: (res) => {
							let group = JSON.parse(res.data)

							if (group.code == 1) {
								resolve({
									url: group.data.url,
									fullurl: group.data.fullurl
								})
							} else {
								uni.showToast({
									title: "上传失败",
									icon: "error"
								})
							}
						}
					});
				})
			},
			deleteImg(index) {
				this.imgList.splice(index, 1)
				this.imgurlList.splice(index, 1)
			},
			submit() {
				if (this.value == -1) {
					this.toast('未选择退款原因')
				} else {
					let _this = this
					uni.showLoading({
						title: '提交中...',
						mask: true
					})
					_this.$api.post('mall.refund/submit', {
						id: _this.id,
						refund_type: _this.type,
						refund_reason: _this.range[_this.value].text,
						refund_explain: _this.desc,
						refund_images: _this.imgurlList.toString(',')
					}).then(res => {
						uni.hideLoading()
						if (res.code == 1) {
							uni.showModal({
								title: '提示',
								content: '提交成功',
								showCancel: false,
								success: res => {
									if (res.confirm) {
										uni.navigateBack({
											delta: 2
										})
									}
								}
							})
						} else {
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel: false,
								success: res => {
									if (res.confirm) {
										uni.navigateBack({
											delta: 1
										})
									}
								}
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
		padding-bottom: 80rpx;
	}

	.body {
		width: calc(100vw - 48rpx);
		padding: 0rpx 24rpx;
	}

	/* 商品详情 */
	.goods {
		width: calc(100vw - 112rpx);
		padding: 40rpx 32rpx;
		margin-top: 24rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		position: relative;
	}

	.item {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 0;
		border-bottom: 1rpx solid #f9f6f6;
	}

	.item:first-of-type {
		padding-top: 0;
	}

	.item:last-of-type {
		padding-bottom: 0;
		border-bottom: none;
	}

	.item .img {
		width: 150rpx;
		height: 150rpx;
	}

	.item .img image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.item .content {
		width: calc(100vw - 286rpx);
	}

	.item .content .top,
	.item .content .center {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
	}

	.item .top .title {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		overflow: hidden;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}

	.item .top .price {
		font-size: 24rpx;
	}

	.item .top .price text {
		font-size: 20rpx;
	}

	.item .content .center {
		font-size: 20rpx;
		color: #999999;
		margin-bottom: 21rpx;
	}

	.item .content .bottom text {
		font-size: 20rpx;
		color: #000000;
		padding: 0 8rpx;
		border: 1rpx solid #000000;
		border-radius: 4rpx;
		margin-right: 12rpx;
	}

	/* 退款金额 */
	.amount {
		width: calc(100vw- 112rpx);
		padding: 0 32rpx;
		background: #FFFFFF;
		margin-top: 24rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.a-item {
		height: 39rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 35rpx 0 33rpx 0;
		font-size: 28rpx;
		font-weight: bold;
		border-bottom: 1rpx solid #E5E5E5;
		position: relative;
	}

	.a-item:last-of-type {
		border: none;
	}

	.a-item .a-title {
		width: 25%;
	}

	.a-item .a-cont {
		width: 72%;
	}

	.a-item .red {
		font-size: 32rpx;
		color: #E43D33;
	}

	.star {
		color: #E43D33;
		position: absolute;
		top: 50%;
		left: -16rpx;
		transform: translateY(-30%);
	}

	.uni-select {
		border: none !important;
		padding: 0 !important;
	}

	/* 申请说明 */
	.instructions {
		width: calc(100vw -112rpx);
		background-color: #FFFFFF;
		border-radius: 24rpx;
		margin-top: 24rpx;
		padding: 32rpx 32rpx 60rpx 32rpx;
	}

	.i-title {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 32rpx;
	}

	.text {
		position: relative;
		margin-bottom: 56rpx;
	}

	.i-title text,
	.text .length {
		font-size: 20rpx;
		color: #999999;
		padding-left: 4rpx;
	}

	.text textarea {
		width: 100%;
		height: 102rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.text .length {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.i-img {
		min-height: 150rpx;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 45rpx;
		position: relative;
	}

	.u-img {
		width: 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
		margin-bottom: 15rpx;
		position: relative;
	}

	.u-img image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 8rpx;
	}

	.u-img .uni-icons {
		position: absolute;
		top: -15rpx;
		right: -15rpx;
		background-color: #FFFFFF;
		border-radius: 50%;
	}

	.i-img image:nth-of-type(4n) {
		margin-right: 0rpx;
	}

	.upload-img {
		width: 150rpx;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
		border: 1rpx dashed #CCCCCC;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.upload {
		width: 150rpx;
		height: 150rpx;
		text-align: center;
		border: 1rpx dashed #CCCCCC;
		font-size: 20rpx;
		margin-bottom: 15rpx;
		color: #999999;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.btn button {
		width: calc(100vw - 112rpx);
		height: 80rpx;
		line-height: 80rpx;
		background-color: #000000;
		font-size: 24rpx;
		color: #FFFFFF;
		rder-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.btn button::after {
		border: none;
	}
</style>